<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>酸轧原料审核</h1>
      </div>
    </div>
    <div class="common-layout">
      <el-container>
        <el-header style="min-height: 10vh">
          <el-form :model="searchForm" label-width="auto" class="search-form">
            <el-form-item label="时间范围" class="time-period-picker">
              <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
              &nbsp;-&nbsp;&nbsp;
              <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="产线" class="select">
              <el-select v-model="searchForm.productionLine" style="min-width: 10rem" clearable>
                <el-option v-for="item in productionLineOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="热卷号">
              <el-input v-model="searchForm.hotCoilNo" />
            </el-form-item>
            <el-form-item label="钢牌号">
              <el-input v-model="searchForm.steelGrade" />
            </el-form-item>
            <el-form-item label="厚度下限">
              <el-input v-model="searchForm.thickMin" />
            </el-form-item>
            <el-form-item label="厚度上限">
              <el-input v-model="searchForm.thickMax" />
            </el-form-item>
            <el-form-item label="宽度下限">
              <el-input v-model="searchForm.widthMin" />
            </el-form-item>
            <el-form-item label="宽度上限">
              <el-input v-model="searchForm.widthMax" />
            </el-form-item>
            <el-form-item label="宽度上限">
              <el-input v-model="searchForm.widthMax" />
            </el-form-item>
            <el-form-item label="异常筛选" class="select">
              <el-select v-model="searchForm.abnormalFilter" placeholder="请选择" clearable style="min-width: 10rem">
                <el-option label="全部" value="" />
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleExport">导出</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main>
          <div class="main-container">
            <el-table
              :data="tableData"
              height="70vh"
              class="data-table"
              :header-cell-style="{
                background: '#083885',
                color: '#ddd',
                textAlign: 'center',
                border: '1px solid rgba(255,255,255,0.18)',
                borderBottom: '1px solid rgba(255,255,255,0.28)',
              }"
              :cell-style="{ color: '#fff', textAlign: 'center' }"
              v-loading="loading"
              element-loading-text="加载中..."
              element-loading-spinner="el-icon-loading"
              element-loading-background="transparent"
              @row-dblclick="detailClick"
              ref="tableRef"
              border
            >
              <el-table-column label="序号" width="60" type="index" fixed="left" />
              <el-table-column prop="hotCoilNo" label="热卷号" fixed="left" />
              <el-table-column prop="slabNo" label="板坯号" />
              <el-table-column label="热卷基本信息">
                <el-table-column prop="hotSteelGrade" label="钢牌号" />
                <el-table-column prop="hotThickness" label="厚度[mm]" />
                <el-table-column prop="hotWidth" label="宽度[mm]" />
                <el-table-column prop="hotTargetWidth" label="目标宽度[mm]" />
                <el-table-column prop="hotLength" label="长度[mm]" />
                <el-table-column prop="hotWeight" label="重量[kg]" />
              </el-table-column>
              <el-table-column label="命中率[%]">
                <el-table-column prop="thicknessHit" label="厚度" />
                <el-table-column prop="widthHit" label="宽度" />
                <el-table-column prop="curvatureHit" label="凸度" />
                <el-table-column prop="bendHit" label="楔形" />
                <el-table-column prop="symmetryFlatnessHit" label="对称平坦度" />
                <el-table-column prop="asymmetryFlatnessHit" label="非对称平坦度" />
                <el-table-column prop="enduranceHit" label="终轧温度" />
                <el-table-column prop="LaminarCoolingTempHit" label="层冷温度" />
              </el-table-column>
              <el-table-column prop="" label="综合等级评定" />
              <el-table-column prop="" label="凸度大于楔形" />
              <el-table-column prop="" label="化学元素" />
              <el-table-column prop="" label="是否混浇坯" />
              <el-table-column label="超差总长度[m]">
                <el-table-column prop="thicknessLen" label="厚度" />
                <el-table-column prop="widthLen" label="宽度" />
                <el-table-column prop="curvatureLen" label="凸度" />
                <el-table-column prop="bendLen" label="楔形" />
                <el-table-column prop="symmetryFlatnessLen" label="对称平坦度" />
                <el-table-column prop="asymmetryFlatnessLen" label="非对称平坦度" />
                <el-table-column prop="enduranceLen" label="终轧" />
                <el-table-column prop="laminarCoolingTempLen" label="层冷" />
              </el-table-column>
              <el-table-column prop="outerDiameter" label="外径[mm]" />
              <el-table-column prop="innerDiameter" label="内径[mm]" />
              <el-table-column prop="hotCoilMachineNo" label="热轧卷取机号" />
              <el-table-column prop="team" label="班别" />
              <el-table-column prop="crew" label="班次" />
              <el-table-column prop="outerDiameter" label="钢卷目标厚度[mm]" />
              <el-table-column prop="innerDiameter" label="精轧出口目标温度[°C]" />
              <el-table-column prop="coilingTargetTemp" label="卷取目标温度[°C]" />
              <el-table-column prop="coilTargetCurvature" label="钢卷目标凸度[mm]" />
              <el-table-column prop="avgTempAfterRough" label="粗轧后平均温度[°C]" />
              <el-table-column prop="thickDeviationAvg" label="厚度偏差均值[μm]" />
              <el-table-column prop="thickDeviationMax" label="厚度偏差最大值[μm]" />
              <el-table-column prop="thickDeviationMin" label="厚度偏差最小值[μm]" />
              <el-table-column prop="thickDeviationStd" label="厚度偏差标准差[μm]" />
              <el-table-column prop="widthDeviationAvg" label="宽度偏差均值[μm]" />
              <el-table-column prop="widthDeviationMax" label="宽度偏差最大值[μm]" />
              <el-table-column prop="widthDeviationMin" label="宽度偏差最小值[μm]" />
              <el-table-column prop="widthDeviationStd" label="宽度偏差标准差[μm]" />
              <el-table-column label="操作" fixed="right" width="160">
                <template #default="scope">
                  <el-button type="warning" @click="detailClick(scope.row)">详情</el-button>
                  <el-button type="success" @click="detailClick(scope.row)">追溯</el-button>
                </template>
              </el-table-column>
              <template #empty>
                <div style="color: #fff; text-align: center; padding: 20px">暂无数据</div>
              </template>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>

  <el-dialog v-model="visible" :before-close="handleClose" ref="dialogRef" @closed="cancel" class="detail-dialog">
    <template #header>
      <span
        >热卷号：<el-text>{{ title }}</el-text></span
      >
    </template>
    <tcm-raw-material-audit :coil-no="detailCoilNo" />
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted, onBeforeMount } from 'vue';
  import { ElTable } from 'element-plus';
  import { useUserStore } from '/@/store/modules/system/user';
  import tcmRawMaterialAudit from './components/tcmRawMaterialAudit.vue';

  interface SearchForm {
    startTime: string;
    endTime: string;
    productionLine: string;
    hotCoilNo: string;
    steelGrade: string;
    thickMin: string;
    thickMax: string;
    widthMin: string;
    widthMax: string;
    abnormalFilter: string;
  }

  const searchForm: SearchForm = reactive({
    startTime: '',
    endTime: '',
    productionLine: '',
    hotCoilNo: '',
    steelGrade: '',
    thickMin: '',
    thickMax: '',
    widthMin: '',
    widthMax: '',
    abnormalFilter: '',
  });

  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  const productionLineOptions = ref([
    { value: 'CAL1630', label: 'CAL1630连退' },
    { value: 'RCL1630', label: 'CAL1630重卷' },
    { value: 'CGL1870', label: 'CGL1870镀锌' },
    { value: 'RCL1870', label: 'CGL1870重卷' },
    { value: 'CAL2150', label: 'CAL2150连退' },
    { value: 'RCL2150', label: 'CAL2150重卷' },
    { value: 'TCM2280', label: 'TCM2280酸轧' },
  ]);

  const tableData = ref<any[]>([]);
  const loading = ref(false);
  const tableRef = ref<InstanceType<typeof ElTable>>();

  // 搜索方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    Object.assign(searchForm, {
      startTime: '',
      endTime: '',
      productionLine: '',
      hotCoilNo: '',
      steelGrade: '',
      thickMin: '',
      thickMax: '',
      widthMin: '',
      widthMax: '',
      abnormalFilter: '',
    });
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // 双击行处理
  const detailClick = (row: any) => {
    detailCoilNo.value = row.hotCoilNo;
    title.value = `${row.hotCoilNo}`;
    visible.value = true;
  };

  // 导出方法
  const handleExport = () => {};

  const menuData = ref([
    { menuName: 'earlyWarningAnalysis', menuTitle: '酸轧原料审核', menuId: '1' },
    { menuName: 'productionPlan', menuTitle: '生产计划' },
    { menuName: 'historyPlan', menuTitle: '历史计划' },
    { menuName: 'pdiList', menuTitle: 'PDI信息' },
  ]);
  onBeforeMount(() => {
    useUserStore().setTagNav(menuData.value);
  });
  onMounted(() => {
    fetchTableData();
  });
  onUnmounted(() => {});

  // ----------------------------------------------------------------  详情dialog 相关 ------------------------------------------

  const visible = ref(false);
  const title = ref('详情');
  const detailCoilNo = ref('');
  const handleClose = () => {
    visible.value = false;
  };
  const cancel = () => {
    visible.value = false;
  };

  // -------------------------------------------------------------------  测试用代码：从静态假数据筛选并分页

  // 简易静态假数据（后续接接口可删除）
  const ALL_DATA = ref<any[]>([
    {
      productionLine: 'CAL1630',
      hotCoilNo: 'HC2025-00001',
      slabNo: 'SLB000001',
      hotSteelGrade: 'SPCC',
      hotThickness: 1.2,
      hotWidth: 1200,
      hotTargetWidth: 1200,
      hotLength: 2100,
      hotWeight: 12340,
      thicknessHit: 96,
      widthHit: 97,
      curvatureHit: 92,
      bendHit: 93,
      symmetryFlatnessHit: 90,
      asymmetryFlatnessHit: 91,
      enduranceHit: 95,
      LaminarCoolingTempHit: 94,
      thicknessLen: 12,
      widthLen: 10,
      curvatureLen: 8,
      bendLen: 7,
      symmetryFlatnessLen: 6,
      asymmetryFlatnessLen: 5,
      enduranceLen: 9,
      LaminarCoolingTempLen: 8,
      outerDiameter: 1100,
      innerDiameter: 610,
      hotCoilMachineNo: 'F3',
      team: '甲',
      crew: '早',
      coilingTargetTemp: 620,
      coilTargetCurvature: 0.25,
      avgTempAfterRough: 980,
      thickDeviationAvg: 5,
      thickDeviationMax: 28,
      thickDeviationMin: -25,
      thickDeviationStd: 12,
      widthDeviationAvg: 6,
      widthDeviationMax: 30,
      widthDeviationMin: -22,
      widthDeviationStd: 11,
    },
    {
      productionLine: 'CGL1870',
      hotCoilNo: 'HC2025-00002',
      slabNo: 'SLB000002',
      hotSteelGrade: 'DX51D',
      hotThickness: 1.6,
      hotWidth: 1250,
      hotTargetWidth: 1250,
      hotLength: 2300,
      hotWeight: 14020,
      thicknessHit: 93,
      widthHit: 95,
      curvatureHit: 90,
      bendHit: 91,
      symmetryFlatnessHit: 88,
      asymmetryFlatnessHit: 89,
      enduranceHit: 92,
      LaminarCoolingTempHit: 90,
      thicknessLen: 10,
      widthLen: 9,
      curvatureLen: 7,
      bendLen: 6,
      symmetryFlatnessLen: 5,
      asymmetryFlatnessLen: 4,
      enduranceLen: 8,
      LaminarCoolingTempLen: 7,
      outerDiameter: 1150,
      innerDiameter: 610,
      hotCoilMachineNo: 'F2',
      team: '乙',
      crew: '中',
      coilingTargetTemp: 610,
      coilTargetCurvature: 0.22,
      avgTempAfterRough: 970,
      thickDeviationAvg: 3,
      thickDeviationMax: 22,
      thickDeviationMin: -18,
      thickDeviationStd: 10,
      widthDeviationAvg: 4,
      widthDeviationMax: 24,
      widthDeviationMin: -16,
      widthDeviationStd: 9,
    },
    {
      productionLine: 'TCM2280',
      hotCoilNo: 'HC2025-00003',
      slabNo: 'SLB000003',
      hotSteelGrade: 'Q345',
      hotThickness: 2.0,
      hotWidth: 1350,
      hotTargetWidth: 1340,
      hotLength: 2000,
      hotWeight: 15500,
      thicknessHit: 91,
      widthHit: 92,
      curvatureHit: 88,
      bendHit: 87,
      symmetryFlatnessHit: 85,
      asymmetryFlatnessHit: 86,
      enduranceHit: 90,
      LaminarCoolingTempHit: 89,
      thicknessLen: 15,
      widthLen: 14,
      curvatureLen: 12,
      bendLen: 10,
      symmetryFlatnessLen: 9,
      asymmetryFlatnessLen: 8,
      enduranceLen: 11,
      LaminarCoolingTempLen: 10,
      outerDiameter: 1180,
      innerDiameter: 610,
      hotCoilMachineNo: 'F5',
      team: '丙',
      crew: '晚',
      coilingTargetTemp: 605,
      coilTargetCurvature: 0.3,
      avgTempAfterRough: 965,
      thickDeviationAvg: -2,
      thickDeviationMax: 26,
      thickDeviationMin: -27,
      thickDeviationStd: 13,
      widthDeviationAvg: -1,
      widthDeviationMax: 21,
      widthDeviationMin: -20,
      widthDeviationStd: 10,
    },
  ]);
  const fetchTableData = () => {
    const { hotCoilNo, steelGrade, productionLine } = searchForm;
    const filtered = ALL_DATA.value.filter((it) => {
      const okCoil = hotCoilNo ? String(it.hotCoilNo).includes(hotCoilNo) : true;
      const okGrade = steelGrade ? String(it.hotSteelGrade).includes(steelGrade) : true;
      const okLine = productionLine ? it.productionLine === productionLine : true;
      return okCoil && okGrade && okLine;
    });
    pagination.total = filtered.length;
    const start = (pagination.currentPage - 1) * pagination.pageSize;
    const end = start + pagination.pageSize;
    tableData.value = filtered.slice(start, end);
  };
</script>
<style lang="less" scoped>
  .common-layout {
    width: 99vw;
    min-height: 100vh;
    margin-top: -4vh;
  }

  .search-form {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    height: auto;
    color: #fff;
    // gap: 1rem;
    padding: 12px;

    :deep(.el-form-item__label) {
      color: #fff !important;
      // font-size: 12px;
    }
  }

  .main-container {
    margin-top: 1vh;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 47, 106, 0.28), rgba(11, 47, 106, 0.18));
    border: 1px solid rgba(207, 227, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(11, 47, 106, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  // --------------------------------------------------------- element-plus样式深度穿透 ------------------------------------

  .select {
    :deep(.el-form-item__label) {
      margin-right: 1rem;
    }
  }

  :deep(.el-select) {
    width: 1rem;
    right: 1rem;
    color: #fff;
    background-color: transparent !important;
  }

  :deep(.el-select__wrapper) {
    color: #fff;
    background-color: transparent !important;
  }

  .time-period-picker :deep(.el-input__wrapper) {
    background-color: transparent !important;
  }

  .time-period-picker :deep(.el-input__inner) {
    color: #fff;
  }

  .time-period-picker :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 0.06rem rgba(255, 255, 255, 0.9) inset;
  }

  .search-form .time-period-picker :deep(.el-input__prefix) {
    color: #fff;
  }

  .search-form :deep(.el-input__inner) {
    color: #fff;
  }

  .select :deep(.el-select__inner) {
    color: #fff;
  }

  .select :deep(.el-select__selected-item) {
    color: #fff;
  }

  .search-form :deep(.el-input__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-select__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  }

  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  }

  :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    background: #0b3571;
  }

  :deep(.el-select .el-input__wrapper) {
    background: #0b3571;
  }

  .pagination {
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    flex: 1;

    :deep(.el-pagination) {
      .el-pagination__sizes .el-select {
        width: 10rem;
      }

      /* 箭头按钮样式 */
      .btn-next,
      .btn-prev {
        color: #fff;
        background-color: transparent !important;
      }

      .el-pagination__total,
      .el-pagination__goto {
        color: #fff;
        margin-right: 1rem;
      }

      .el-pagination__classifier,
      .el-input__inner,
      .el-select__selected-item,
      .el-select__caret {
        color: #fff;
      }
    }
  }

  .main-container :deep(.el-table) {
    background-color: transparent;
    --el-table-border: none;
    --el-table-border-color: transparent;
    color: white;
    --el-table-row-hover-bg-color: unset;

    :deep(.el-table__row:nth-child(odd)) {
      background-color: #223671;
    }
  }

  .main-container :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }
  .main-container :deep(.el-table__row:nth-child(odd)) {
    background-color: #223671;
  }
  .main-container :deep(.el-table__row:nth-child(even)) {
    background-color: #0c1d5e;
  }

  .main-container :deep(.el-table th),
  .main-container :deep(.el-table tr),
  .main-container :deep(.el-table td) {
    background-color: transparent;
  }

  .main-container :deep(.el-table__body tr:nth-child(odd) > td.el-table-fixed-column--left) {
    background-color: #223671 !important;
  }
  .main-container :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left) {
    background-color: #0c1d5e !important;
  }

  .main-container :deep(.el-table__body tr:nth-child(odd) > td.el-table-fixed-column--right) {
    background-color: #223671 !important;
  }
  .main-container :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
    background-color: #0c1d5e !important;
  }

  .main-container :deep(.el-table__fixed, .el-table-fixed-column--left) {
    background-color: transparent !important;
  }

  .el-text {
    color: rgb(149, 212, 117);
    font-weight: 700;
  }
</style>
